<template>
  <div class="member">
    <div class="columns">
      <div class="column is-one-quarter">
        <el-card shadow="never">
          <div slot="header" class="has-text-centered">
            <el-avatar :size="64" :src="`https://cn.gravatar.com/avatar/${topicUser.id}?s=164&d=identicon`" />
            <p class="mt-3">{{ topicUser.alias }}<span class="is-size-7 has-text-grey">{{ '@' + topicUser.username }}</span></p>
          </div>
          <div>
            <p ><i class="el-icon-date"></i>{{$t('common.joined')}}: {{ dayjs(topicUser.createTime).format("YYYY/MM/DD") }}</p>
            <p class="mt-2"><i class="el-icon-user"></i>{{$t('common.Bio')}}: {{ topicUser.bio }}</p>
            <p class="mt-2"><i class="el-icon-message"></i>{{$t('common.Email')}}: {{ topicUser.email }}</p>
            <p class="mt-2"><i class="el-icon-phone"></i>{{$t('common.mobile')}}: {{ topicUser.mobile }}</p>
          </div>
        </el-card>
      </div>
      <div class="column">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" @click='toblog'>{{$t('common.blogs')}}</el-menu-item>
          <el-menu-item index="2" @click='tofollow'>{{$t('common.following')}}</el-menu-item>
          <el-menu-item index="3" @click='tofollower'>{{$t('common.follower')}}</el-menu-item>
        </el-menu>
        <!--用户发布的话题-->
        <el-card class="box-card content" shadow="never">
          <div v-if="state==0">

          <div v-if="topics.length===0">
            {{$t('common.emptyBlogs')}}
          </div>

          <div v-else class="topicUser-info">
            <article v-for="(item, index) in topics" :key="index" class="media">
              <div class="media-content">
                <div class="content ellipsis is-ellipsis-1">
                  <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                    <router-link :to="{ name: 'post-detail', params: { id: item.id } }">
                      {{ item.title }}
                    </router-link>
                  </el-tooltip>
                </div>
                <nav class="level has-text-grey is-size-7">
                  <div class="level-left">
                    <span class="mr-1">
                      {{$t('common.postTime')}}:{{ dayjs(item.createTime).format("YYYY/MM/DD HH:mm:ss") }}
                    </span>
                  </div>
                </nav>
              </div>
              <div v-if="token" class="media-right">
                <div v-if="topicUser.username === user.username" class="level">
                  <div class="level-item mr-1">
                    <router-link :to="{name:'topic-edit',params: {id:item.id}}">
                      <span class="tag is-info">{{$t('common.edit')}}</span>
                    </router-link>
                  </div>
                  <div class="level-item">
                    <a @click="handleDelete(item.id)">
                      <span class="tag is-danger">{{$t('common.delete')}}</span>
                    </a>
                  </div>
                </div>
              </div>
            </article>
          </div>

          <!--分页-->
          <pagination
            v-show="page.total > 0"
            class="mt-5"
            :total="page.total"
            :page.sync="page.current"
            :limit.sync="page.size"
            @pagination="fetchUserById"
          />
          </div>

          <div v-if="state==1">
          <div v-if="parents.length==0">
            {{$t('common.emptyFollowing')}}
          </div>
          <div v-else class="topicUser-info">
            <article v-for="(item, index) in parents" :key="index" class="media">
              <div class="media-content">
                <nav class="level">
                  <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        <el-avatar :src="`https://cn.gravatar.com/avatar/${item.id}?s=164&d=identicon`"></el-avatar>
                      </router-link>
                      <el-tooltip class="item" effect="dark" :content="item.alias" placement="top">
                        <router-link :to="{ name: 'user', params: { username: item.username } }">
                          {{ item.alias }}
                          <span class="is-size-7 has-text-grey">{{ '@' + item.username }}</span>
                        </router-link>
                      </el-tooltip>
                  </div>
                </nav>
              </div>
              <div v-if="token" class="media-right">
                <div v-if="topicUser.username === user.username" class="level">
                  <div class="level-item">
                      <button
                        class="button is-info button-center is-fullwidth"
                        @click="handleUnFollow(item.id)"
                      >
                      {{$t('common.unfollow')}}
                      </button>
                  </div>
                </div>
              </div>
            </article>
          </div>
        
          <!--分页-->
          <pagination
            v-show="page.total > 0"
            class="mt-5"
            :total="page.total"
            :page.sync="page.current"
            :limit.sync="page.size"
            @pagination="fetchUserById"
          />
          </div>

          <div v-if="state==2">
          <div v-if="followers.length==0">
            {{$t('common.emptyFollower')}}
          </div>
          <div v-else class="topicUser-info">
            <article v-for="(item, index) in followers" :key="index" class="media">
              <div class="media-content">
                <nav class="level">
                  <div class="level-left">
                      <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                        <el-avatar :src="`https://cn.gravatar.com/avatar/${item.id}?s=164&d=identicon`"></el-avatar>
                      </router-link>
                      <el-tooltip class="item" effect="dark" :content="item.alias" placement="top">
                        <router-link :to="{ name: 'user', params: { username: item.username } }">
                        <p>{{ item.alias }}
                        <span class="is-size-7 has-text-grey">{{ '@' + item.username }}</span>
                        </p>
                        </router-link>
                      </el-tooltip>
                  </div>
                </nav>
              </div>
            </article>
          </div>
          
          <!--分页-->
          <pagination
            v-show="page.total > 0"
            class="mt-5"
            :total="page.total"
            :page.sync="page.current"
            :limit.sync="page.size"
            @pagination="fetchUserById"
          />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { unFollow } from '@/api/follow'
import { getInfoByName,getFollowByName,getFollowerByName} from '@/api/user'
import pagination from '@/components/Pagination/index'
import { mapGetters } from 'vuex'
import { deleteTopic } from '@/api/post'
export default {
  name: 'Profile',
  components: { pagination },
  data() {
    return {
      topicUser: {},
      topics: {},
      parents:{},
      followers:{},
      page: {
        current: 1,
        size: 5,
        total: 0
      },
      state:0,
      activeIndex:"1"
    }
  },
  computed: {
    ...mapGetters(['token', 'user'])
  },
  created() {
    this.fetchUserById()
  },
  methods: {
    fetchUserById() {
      getInfoByName(this.$route.params.username, this.page.current, this.page.size).then((res) => {
        const { data } = res
        this.topicUser = data.user
        this.page.current = data.topics.current
        this.page.size = data.topics.size
        this.page.total = data.topics.total
        this.topics = data.topics.records
      })
    },
    fetchFollowById(){
      getFollowByName(this.$route.params.username, this.page.current, this.page.size).then((res)=>{
        const {data}=res
        this.page.current = data.parent.current
        this.page.size = data.parent.size
        this.page.total = data.parent.total
        this.parents=data.parent.records
      })
    },
    fetchFollowerById(){
      getFollowerByName(this.$route.params.username, this.page.current, this.page.size).then((res)=>{
        const {data}=res
        this.page.current = data.follower.current
        this.page.size = data.follower.size
        this.page.total = data.follower.total
        this.followers = data.follower.records
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTopic(id).then(value => {
          const { code, message } = value
          if (code === 200) {
            setTimeout(() => {
              this.fetchUserById()
            }, 500)
          }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    toblog(){
      this.state=0;
      this.fetchUserById();
    },
    tofollow(){
      this.state=1;
      this.fetchFollowById();
    },
    tofollower(){
      this.state=2;
      this.fetchFollowerById();
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    handleUnFollow(id) {
      unFollow(id).then(response => {
        const { code,message } = response
        this.$message.success(message)
        if(code===200){
          setTimeout(() => {
            this.fetchFollowById()
          }, 500)
        }
      }) 
    }
  }
}
</script>

<style scoped>
</style>